<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mi.com</title>
    <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/mi.css">
</head>

<body>
    <!-- 顶部导航栏 start -->
    <div class="nav">
        <div class="container">
            <div class="nav-left fl">
                <a href="">玉米商城</a>
                <a href="">链接A</a>
                <a href="">链接B</a>
                <a href="">链接C</a>
                <a href="">链接D</a>
            </div>
            <div class="nav-right fr">
                <a href="">登录</a>
                <a href="">注册</a>
                <a href="">消息</a>
                <a href="">购物车</a>
            </div>
        </div>

    </div>
    <!-- 顶部导航栏 end -->

    <!-- 首屏 开始 -->
    <div class="main">
        <!-- 目录导航 开始 -->
        <div class="main-header">
            <div class="logo fl">
                <img src="./img/logo.png" alt="">
                <img src="./img/logo_r.png" alt="">
            </div>
            <div class="top-menu fl">
                <a href="">玉米手机</a>
                <a href="">苞米</a>
                <a href="">电视</a>
                <a href="">爆米花</a>
                <a href="">服务</a>
                <a href="">社区</a>
            </div>
            <div class="main-search fr">
                <input type="text">
                <button>搜索</button>
            </div>
        </div>
        <!-- 目录导航 结束 -->

        <!-- 菜单+轮播 开始 -->
        <div class="menu clearfix">
            <div class="sidebar fl">
                <div class="item-list">
                    <a href="">手机 电话卡</a>
                    <a href="">电视 盒子</a>
                    <a href="">笔记本</a>
                    <a href="">智能 家电</a>
                    <a href="">健康 家居</a>
                    <a href="">出行 儿童</a>
                    <a href="">路由器 手机配件</a>
                    <a href="">移动电源 插线板</a>
                    <a href="">耳机 音箱</a>
                    <a href="">生活 米兔</a>
                </div>
            </div>
            <div class="carousel fr">
                <img src="./img/carousel.png" alt="">
            </div>
        </div>
        <!-- 菜单+轮播 结束 -->

        <!-- 副广告曲 开始 -->
        <div class="main-down clearfix">
            <div class="fl">
                <a class="pic">
                    <img src="./img/pic0.png" alt="">
                </a>
            </div>

            <div class="fr">
                <a class="pic-item first">
                    <img src="./img/pic1.png" alt="">
                </a>
                <a class="pic-item">
                    <img src="./img/pic2.png" alt="">
                </a>
                <a class="pic-item">
                    <img src="./img/pic3.png" alt="">
                </a>
            </div>

        </div>
        <!-- 副广告区 结束 -->

        <!-- 闪购 开始 -->
        <div class="flash-sale">
            <h1>限时闪购</h1>
            <div class="flash-list clearfix">
                <div class="flash-left fl">
                    <a class="flash-item first" href="">
                        <img src="./img/flash0.png" alt="">
                    </a>
                </div>
                <div class="flash-right fr">
                    <a class="flash-item" href="">
                        <img src="./img/flash1.png" alt="">
                    </a>
                    <a class="flash-item" href="">
                        <img src="./img/flash2.png" alt="">
                    </a>
                    <a class="flash-item" href="">
                        <img src="./img/flash1.png" alt="">
                    </a>
                    <a class="flash-item" href="">
                        <img src="./img/flash2.png" alt="">
                    </a>
                </div>

            </div>
        </div>
        <!-- 闪购 结束 -->
    </div>

    <!-- 首屏 结束 -->

    <!-- 商品展示 开始 -->
    <div class="goods">
        <div class="container">
            <div class="goods-box clearfix">
                <h2>家电</h2>
                <div class="goods-box-left fl">
                    <img src="./img/goods-left0.png" alt="">
                </div>
                <div class="goods-box-right fr">
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item1.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item2.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item3.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item4.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item4.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item3.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item2.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item1.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                        <!-- <div class="item-memo">
                            <a href="">我真的是个天才，哈哈哈哈</a>
                        </div> -->
                    </div>

                </div>
            </div>
            <div class="goods-box clearfix">
                <h2>智能</h2>
                <div class="goods-box-left fl">
                    <a class="left-item first" href="">
                        <img src="./img/goods-left1.png" alt="">
                    </a>
                    <a class="left-item" href="">
                        <img src="./img/goods-left1.png" alt="">
                    </a>
                </div>
                <div class="goods-box-right fr">
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item1.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item2.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item3.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item4.png" alt="">
                            </a>
                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item4.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item3.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item2.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>
                    <div class="goods-item fl">
                        <div class="item-img">
                            <a href="">
                                <img src="./img/item1.png" alt="">
                            </a>

                        </div>
                        <p class="item-title">
                            <a href="">商品名称</a>
                        </p>
                        <p class="item-price">1999元</p>
                    </div>

                </div>
            </div>
            <!-- 热评产品 开始 -->
            <div class="goods-box clearfix">
                <h2>热评商品</h2>
                <div class="hot-goods-list">
                    <div class="hot-goods first fl">
                        <p class="hot-goods-img">
                            <a href="">
                                <img src="./img/item11.png" alt="">
                            </a>
                        </p>
                        <p class="hot-goods-msg">
                            <a>东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</a>
                        </p>
                        <p class="hot-goods-author">
                            <a href="">来源于水军1号的评价</a>
                        </p>
                        <div class="hot-goods-info">
                            <h3 class="title">玉米插线板</h3>
                            <span>|</span>
                            <p class="price">49元</p>
                        </div>
                    </div>
                    <div class="hot-goods fl">
                        <p class="hot-goods-img">
                            <a href="">
                                <img src="./img/item12.png" alt="">
                            </a>
                        </p>
                        <p class="hot-goods-msg">
                            <a>东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</a>
                        </p>
                        <p class="hot-goods-author">
                            <a href="">来源于水军1号的评价</a>
                        </p>
                        <div class="hot-goods-info">
                            <h3 class="title">玉米插线板</h3>
                            <span>|</span>
                            <p class="price">49元</p>
                        </div>
                    </div>
                    <div class="hot-goods fl">
                        <p class="hot-goods-img">
                            <a href="">
                                <img src="./img/item11.png" alt="">
                            </a>
                        </p>
                        <p class="hot-goods-msg">
                            <a>东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</a>
                        </p>
                        <p class="hot-goods-author">
                            <a href="">来源于水军1号的评价</a>
                        </p>
                        <div class="hot-goods-info">
                            <h3 class="title">玉米插线板</h3>
                            <span>|</span>
                            <p class="price">49元</p>
                        </div>
                    </div>
                    <div class="hot-goods fl">
                        <p class="hot-goods-img">
                            <a href="">
                                <img src="./img/item12.png" alt="">
                            </a>
                        </p>
                        <p class="hot-goods-msg">
                            <a>东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在...</a>
                        </p>
                        <p class="hot-goods-author">
                            <a href="">来源于水军1号的评价</a>
                        </p>
                        <div class="hot-goods-info">
                            <h3 class="title">玉米插线板</h3>
                            <span>|</span>
                            <p class="price">49元</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 热评商品 结束 -->
        </div>
    </div>

    <!-- 商品展示 结束 -->

    <!-- 底部 开始 -->
    <div class="footer">
        <div class="container">
            <div class="service-info">
                <div class="service-item first"><a href="">预约维修</a></div>
                <div class="service-item"><a href="">7天无理由退货</a></div>
                <div class="service-item"><a href="">15天免费换货</a></div>
                <div class="service-item"><a href="">满150元包邮</a></div>
                <div class="service-item"><a href="">520余家售后网点</a></div>  
            </div>
            <div class="slogan">
                &copy;为发骚而生
            </div>
        </div>
    </div>
    <!-- 底部 结束 -->
</body>

</html>